<template>
    <div>
        <div id="topBar" style="position: fixed;width: 100%;background: #fff;z-index: 99;">
            <bar text="运营管理"></bar>
        </div>
        <!--        地图盒子-->
        <div style="width: 100%;height: 100%;overflow: hidden;">
            <div id="fengMap"></div>

        </div>
        <!--        地图模型透明度调试-->
<!--        <div @click="change" style="position: fixed;bottom: 160px;right:40px;">-->
<!--            <p>点击</p>-->
<!--        </div>-->
<!--        <div @click="change2" style="position: fixed;bottom: 140px;right:40px;">-->
<!--            <p>清除</p>-->
<!--        </div>-->
        <!--楼层切换组件-->
        <div id="btnsFloor" class="btnsFloor">
            <!--多层/单层切换按钮-->
            <span style="display: none" @click="changeViews" :class="{'multi':showIndex == 1}"></span>
            <!--楼层数据-->
            <ul id="floors"></ul>
        </div>
        <!--        店铺详情-->
        <div id="tip" class="spaceDetail">
            <div class="spaceDetail-box" id="spaceDetail-box">
                <!--            基本信息-->
                <div class="spaceTop" style="position: relative;">
                    <img @click="closeDetail" src="./images/closeTop.png" style="width: 20px;height: 20px;position: absolute;top: 18px;right: 18px;" alt="">
                    <div @click="moreBtn" style="padding-top: 8px;margin-bottom: 16px;">
                        <img src="./images/goTop.png" style="width:40px;height: 10px;" alt="">
                    </div>
                    <!--可招商-->
                    <div v-if="attract == 2">
                        <div style="display: flex;align-items: center;margin-left: 22px;margin-top: 16px;padding-bottom: 36px;margin-right: 20px;border-bottom: 1px solid #E8E8E8;">
                            <p style="font-size: 18px;color: #2A2A2A;font-family: font2;">店铺编号：LG2235</p>
                            <p style="width: 56px;height: 20px;line-height: 20px;background: #EB5D5D;border-radius: 10px;margin-left: 10px;text-align: center;font-size: 10px;color:#fff;">可招商</p>
                        </div>
                        <p class="spaceTop-txt">详细信息</p>
                        <!--                可招商信息-->
                        <div style="margin-bottom: 20px;">
                            <p class="spaceTxt1">租金价格：<span style="color: #255ED7;">10万/月</span></p>
                            <p class="spaceTxt1">可用面积：<span style="color: #255ED7;">122㎡   </span></p>
                        </div>
                        <div class="spaceLine2"></div>
                    </div>
                    <!--在租中-->
                    <div v-if="attract == 0">
                        <div style="display: flex;align-items: center;margin-left: 22px;margin-top: 16px;margin-right: 20px;">
                            <p style="font-size: 18px;color: #2A2A2A;font-family: font2;">店铺名称</p>
                            <p style="width: 56px;height: 20px;line-height: 20px;background: #2F70FF;border-radius: 10px;margin-left: 10px;text-align: center;font-size: 10px;color:#fff;">在租中</p>
                            <p style="width: 64px;height: 20px;line-height: 20px;background: #EB5D5D;border-radius: 10px;margin-left: 10px;text-align: center;font-size: 10px;color:#fff;">即将到期</p>
                        </div>
                        <p style="margin-top: 10px;margin-left: 22px;font-size: 12px;color: #666666;padding-bottom: 14px;">起：2018/10/10 —— 止：2020/10/10</p>
                        <div class="spaceLine2"></div>
                        <p class="spaceTop-txt">租户联系方式</p>
                        <div style="margin-top: 4px;margin-left: 22px;margin-right: 22px;border-bottom: 1px solid #E8E8E8;padding-bottom: 16px;margin-bottom: 16px;">
                            <div style="display: flex;align-items: center;margin-top: 14px;">
                                <img src="./images/Contacts.png" style="width:20px;height: 20px;" alt="">
                                <p style="color: #333333;font-size: 15px;margin-left: 10px;">联系人：小雨</p>
                            </div>
                            <div style="display: flex;align-items: center;margin-top: 14px;">
                                <img src="./images/phone.png" style="width:20px;height: 20px;" alt="">
                                <p style="color: #333333;font-size: 15px;margin-left: 10px;">电    话：15910911841</p>
                            </div>
                        </div>
                    </div>
                    <!--                   已预订-->
                    <div v-if="attract == 1">
                        <div style="display: flex;align-items: center;margin-left: 22px;margin-top: 16px;margin-right: 20px;">
                            <p style="font-size: 18px;color: #2A2A2A;font-family: font2;">店铺编号：LG2235</p>
                            <p style="width: 56px;height: 20px;line-height: 20px;background: #35C077;border-radius: 10px;margin-left: 10px;text-align: center;font-size: 10px;color:#fff;">已预订</p>
                        </div>
                        <p style="margin-top: 10px;margin-left: 22px;font-size: 12px;color: #666666;padding-bottom: 14px;">预定时间：2019/12/10 </p>
                        <div class="spaceLine2"></div>
                        <p class="spaceTop-txt">预定人联系方式</p>
                        <div style="margin-top: 4px;margin-left: 22px;margin-right: 22px;border-bottom: 1px solid #E8E8E8;padding-bottom: 16px;margin-bottom: 16px;">
                            <div style="display: flex;align-items: center;margin-top: 14px;">
                                <img src="./images/Contacts.png" style="width:20px;height: 20px;" alt="">
                                <p style="color: #333333;font-size: 15px;margin-left: 10px;">联系人：小雨</p>
                            </div>
                            <div style="display: flex;align-items: center;margin-top: 14px;">
                                <img src="./images/phone.png" style="width:20px;height: 20px;" alt="">
                                <p style="color: #333333;font-size: 15px;margin-left: 10px;">电    话：15910911841</p>
                            </div>
                        </div>
                    </div>

                </div>

                <div v-if="detailMore == 1">
                    <!--在租中详细信息-->
                    <div v-if="attract == 0">
                        <p class="spaceTop-txt">详细信息</p>
                        <p class="spaceDetail-list">商铺性质：餐饮</p>
                        <p class="spaceDetail-list">品牌名称：耐克</p>
                        <p class="spaceDetail-list">租金价格：10万/月</p>
                        <p class="spaceDetail-list">合同编号：1213268235</p>
                        <p class="spaceDetail-list">商铺编号：LJJHI1564</p>
                        <p class="spaceDetail-list" style="margin-bottom: 16px;">可用面积：122㎡   </p>
                        <div class="spaceLine2"></div>
                    </div>
                    <!--                   已预订详细信息-->
                    <div v-if="attract == 1">
                        <p class="spaceTop-txt">详细信息</p>
                        <p class="spaceDetail-list">商铺性质：餐饮</p>
                        <p class="spaceDetail-list">定金价格：1000</p>
                        <p class="spaceDetail-list">租金价格：10万/月</p>
                        <p class="spaceDetail-list">可用面积：122㎡   </p>
                        <p class="spaceDetail-list" style="margin-bottom: 16px;">渠道来源：招商   </p>
                        <div class="spaceLine2"></div>
                    </div>

                    <!--            建筑规格-->
                    <div class="spaceArchitecture">
                        <p class="spaceTop-txt">建筑规格</p>
                        <div class="spaceArchitecture-box">
                            <div style="width: 216px;height: 136px;background: #F7F7F7;"></div>
                            <div style="margin-left: 12px;">
                                <p style="font-size: 12px;color: #666666;margin-top: 4px;">长：200m</p>
                                <p style="font-size: 12px;color: #666666;margin-top: 10px;">宽：60m</p>
                                <p style="font-size: 12px;color: #666666;margin-top: 10px;">高：5m</p>
                                <p style="font-size: 12px;color: #666666;margin-top: 36px;">建筑面积：</p>
                                <p style="font-size: 18px;color: #387BFF;margin-top: 10px;">132㎡</p>
                            </div>
                        </div>
                    </div>

                    <!--                   负责人联系方式-->
                    <div v-if="attract == 0 || attract == 1">
                        <div class="spaceLine2"></div>
                        <p class="spaceTop-txt">负责人联系方式</p>
                        <div style="width: 334px;height: 38px;background: #F9F9F9;margin-top: 11px;margin-left: 22px;display: flex;margin-bottom: 40px;">
                            <p style="color: #333333;font-size: 13px;line-height: 38px;margin-left: 20px;flex: 1;">负责人：杨某</p>
                            <p style="color: #333333;font-size: 13px;line-height: 38px;flex: 1;">电话：15910911841</p>
                        </div>
                    </div>

                </div>
            </div>

        </div>

        <!-- KPI概览-->
        <div @click="goKpi" class="operateKpi">
            <div style="width: 40px;height: 40px;background: #fff;box-shadow:0px 1px 13px 2px rgba(0,0,0,0.06);border-radius: 50%;">
                <img src="./images/kpiLogo.png" style="width: 20px;height: 20px;align-items: center;margin-top: 10px;" alt="">
            </div>
            <p style="font-size: 12px;color: #333333;margin-top: 14px;text-align: center;">KPI概览</p>
        </div>
        <!--底栏-->
        <div class="operateBar" v-if="height == 1">
            <div style="height: 20px;width: 100%;">
                <img v-if="showType == 0" @click="goTop" src="./images/goTop2.png" style="width:40px;height: 10px;margin-top: 10px;" alt="">
                <img v-if="showType == 1" @click="goTop" src="./images/goDown2.png" style="width:40px;height: 10px;margin-top: 10px;" alt="">
            </div>
            <div class="operateBar-top" style="margin-top: 6px;">
                <div @click="barBtn1">
                    <img class="operateBar-topImg" v-if="barIndex1 == 0" src="./images/operateBar1.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar2.png" alt="">
                </div>
                <div @click="barBtn2">
                    <img class="operateBar-topImg" v-if="barIndex2 == 0" src="./images/operateBar3.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar4.png" alt="">
                </div>
                <div @click="barBtn3">
                    <img class="operateBar-topImg" v-if="barIndex3 == 0" src="./images/operateBar5.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar6.png" alt="">
                </div>
                <div @click="barBtn4">
                    <img class="operateBar-topImg" v-if="barIndex4 == 0" src="./images/operateBar7.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar8.png" alt="">
                </div>
                <div @click="barBtn5">
                    <img class="operateBar-topImg" v-if="barIndex5 == 0" src="./images/operateBar9.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar10.png" alt="">
                </div>
            </div>
            <div id="barShow" style="display: none;">
                <div class="spaceLine2"></div>
                <div class="operateBar-bottom">
                    <div class="operateBar-btn1" v-if="operateBtn == 0" @click="operateBarbtn">
                        <img class="operateBar-btnImg" src="./images/operateIcon1.png" alt="">
                        <p class="operateBar-btnTxt">店铺价值</p>
                    </div>
                    <div class="operateBar-btn2" v-else @click="operateBarbtn">
                        <img class="operateBar-btnImg" src="./images/operateIcon7.png" alt="">
                        <p class="operateBar-btnTxt" style="color: #fff">店铺价值</p>
                    </div>
                    <div class="operateBar-btn" @click="operateBarbtn2">
                        <img class="operateBar-btnImg" src="./images/operateIcon2.png" alt="">
                        <p class="operateBar-btnTxt">品牌价值</p>
                        <img class="operateBar-btnImg2" src="./images/operateIcon3.png" alt="">
                    </div>
                    <div class="operateBar-btn" @click="operateBarbtn3">
                        <img class="operateBar-btnImg" src="./images/operateIcon1.png" alt="">
                        <p class="operateBar-btnTxt">调整建议</p>
                        <img class="operateBar-btnImg2" src="./images/operateIcon3.png" alt="">
                    </div>

                </div>
            </div>
        </div>
        <div class="operateBar" v-if="height == 0">
            <div class="operateBar-top" style="margin-top: 16px;">
                <div @click="barBtn1">
                    <img class="operateBar-topImg" v-if="barIndex1 == 0" src="./images/operateBar1.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar2.png" alt="">
                </div>
                <div @click="barBtn2">
                    <img class="operateBar-topImg" v-if="barIndex2 == 0" src="./images/operateBar3.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar4.png" alt="">
                </div>
                <div @click="barBtn3">
                    <img class="operateBar-topImg" v-if="barIndex3 == 0" src="./images/operateBar5.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar6.png" alt="">
                </div>
                <div @click="barBtn4">
                    <img class="operateBar-topImg" v-if="barIndex4 == 0" src="./images/operateBar7.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar8.png" alt="">
                </div>
                <div @click="barBtn5">
                    <img class="operateBar-topImg" v-if="barIndex5 == 0" src="./images/operateBar9.png" alt="">
                    <img class="operateBar-topImg" v-else src="./images/operateBar10.png" alt="">
                </div>
            </div>
            <div>
                <div class="spaceLine2"></div>
                <div class="operateBar-bottom">
                    <div class="operateBar-btn1" v-if="operateBtn == 0" @click="operateBarbtn">
                        <img class="operateBar-btnImg" src="./images/operateIcon1.png" alt="">
                        <p class="operateBar-btnTxt">店铺价值</p>
                    </div>
                    <div class="operateBar-btn2" v-else @click="operateBarbtn">
                        <img class="operateBar-btnImg" src="./images/operateIcon7.png" alt="">
                        <p class="operateBar-btnTxt" style="color: #fff">店铺价值</p>
                    </div>
                    <div class="operateBar-btn" @click="operateBarbtn2">
                        <img class="operateBar-btnImg" src="./images/operateIcon2.png" alt="">
                        <p class="operateBar-btnTxt">品牌价值</p>
                        <img class="operateBar-btnImg2" src="./images/operateIcon3.png" alt="">
                    </div>
                    <div class="operateBar-btn" @click="operateBarbtn3">
                        <img class="operateBar-btnImg" src="./images/operateIcon1.png" alt="">
                        <p class="operateBar-btnTxt">调整建议</p>
                        <img class="operateBar-btnImg2" src="./images/operateIcon3.png" alt="">
                    </div>

                </div>
            </div>
        </div>
<!--        坪效色块划分展示-->
        <div class="rentColor" v-if="barIndex1 == 1">
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color11.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">8000元/m²以上</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color12.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">2000-8000元/m²</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color13.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">2000元/m²以下</p>
            </div>
        </div>
        <div class="rentColor" v-if="barIndex2 == 1">
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color14.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">8000人次以上</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color15.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">2000-8000人次</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color16.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">2000人次以下</p>
            </div>
        </div>
        <div class="rentColor" v-if="barIndex3 == 1">
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color17.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">8000元以上</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color18.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">2000-8000元</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color19.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">2000元以下</p>
            </div>
        </div>
        <div class="rentColor" v-if="barIndex4 == 1">
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color20.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">8000人/m²以上</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color21.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">2000-8000人/m²</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color22.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">2000人/m²以下</p>
            </div>
        </div>
        <div class="rentColor" v-if="barIndex5 == 1">
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color23.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">80%以上</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color24.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">20%-80%</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color25.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">20%以下</p>
            </div>
        </div>
        <div class="rentColor" v-if="operateBtn == 1">
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color17.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">80分以上</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color18.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">20-80分</p>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 14px;">
                <img src="./images/color19.png" style="width: 17px;height: 15px;" alt="">
                <p style="font-size: 12px;color: #333333;margin-left: 16px;">20分以下</p>
            </div>
        </div>

    </div>
</template>

<script>
    import defaultImg from './images/phone.png'
    import fengmap from '../../mapJs/fengmap2.min.js'
    import titles from "../../components/titleBar";
    import bar from "../../components/topBar3";
    export default {
        props: {},
        components: {
            titles,
            bar,
        },
        name: "spaceMap",
        data(){
            return{
                isMap:'',
                multiFlag:false,
                showIndex:0,
                defaultIndex:3,
                defaultFocusID:1,
                alertMars:[],
                dmLayer:null,
                // 店铺出租情况 0在租中 1已预订 2可招商
                attract:1,
                // 展示全部信息
                detailMore:0,
                // 店铺价值
                operateBtn:0,
                // 坪效
                barIndex1:0,
                // 客流
                barIndex2:0,
                // 销售额
                barIndex3:0,
                // 集客力
                barIndex4:0,
                // 转化率
                barIndex5:0,
                // 色块划分
                renta:[],
                rentb:[],
                rentc:[],
                screenWidth: document.documentElement.clientWidth,     // 屏幕宽
                screeHeight: document.documentElement.clientHeight,    // 屏幕高
                height:0,
                showType:0


            }
        },
        mounted() {
            document.body.addEventListener('touchstart', function () {});
            this.map()
            var screeHeight = document.documentElement.clientHeight
            if(screeHeight < 605){
                this.height = 1
            }

        },
        methods: {
            // 地图渲染
            map: function () {
                var that = this
                var fmapID = 'huiyunquanlian123'; //mapId
                var map = new fengmap.FMMap({
                    container: document.getElementById("fengMap"), //设置显示地图容器
                    appName: 'bimDemo',           //开发者申请应用名称
                    key: 'a3476b2a1a8fb8fcfd75422908f25610',  //开发者申请应用下web服务的key
                    defaultVisibleGroups: [1],           //设置初始显示楼层，数组格式，可单个，可多个
                    defaultFocusGroup: 1,               //初始聚焦楼层
                    defaultThemeName: 'huiyunquanlian123',
                    defaultMapScaleLevel: 19,
                    focusAnimateMode: true,            //开启聚焦层切换的动画显示
                    viewModeAnimateMode: false,          //开启2维，3维切换的动画显示
                    moveToAnimateMode: false,           //地图定位跳转动画设置
                    tile:true,
                    defaultBackgroundColor:'#F9F9F9',
                    defaultControlsPose:1,
                });
                that.isMap = map
                map.openMapById(fmapID);
                var groupControl;
                //2D、3D控件配置
                var toolControl = new fengmap.toolControl(map, {
                    init2D: false,   //初始化2D模式
                    groupsButtonNeeded: false,   //设置为false表示只显示2D,3D切换按钮
                    offset: {
                        x: -22,
                        y: 140
                    },
                    //点击按钮的回调方法,返回type表示按钮类型,value表示对应的功能值
                    clickCallBack: function (type, value) {
                        // console.log(type,value);
                    }
                });
                //地图加载完成回掉方法
                var defaultFocusID = 1;
                //楼层索引值
                // var defaultIndex = this.defaultIndex;
                map.on('loadComplete', function () {
                    let searchKeyword = localStorage.getItem('searchKeyword')
                    localStorage.setItem('searchKeyword', '')
                    if(searchKeyword == 0){
                        that.$options.methods.barBtn1.bind(that)();
                    }else if(searchKeyword == 1){
                        that.$options.methods.barBtn2.bind(that)();
                    }else if(searchKeyword == 2){
                        that.$options.methods.barBtn3.bind(that)();
                    }else if(searchKeyword == 3){
                        that.$options.methods.barBtn4.bind(that)();
                    }else if(searchKeyword == 4){
                        that.$options.methods.barBtn5.bind(that)();
                    }else if(searchKeyword == 5){
                        that.$options.methods.operateBarbtn.bind(that)();
                    }else {
                        that.$options.methods.barBtn1.bind(that)();
                    }

                    document.getElementById('btnsFloor').style.display = 'block';
                    // var groupIDs = map.groupIDs.reverse();
                    var groupIDs = [4,3,2,1]
                    var ulHtml = '';
                    groupIDs.map(function (item, index) {
                        var className = item === defaultFocusID ? "active" : "changeFloor";
                        ulHtml += '<li class="' + className + '" onclick="changeFloor(this,' + item + ', ' + index + ')">F' + item + '</li>';
                    });

                    //楼层组件Dom
                    var ulDom = document.getElementById('floors');
                    ulDom.innerHTML = ulHtml;
                });
                // 地图点击事件
                map.on('mapClickNode', function (event) {
                    // console.log(event)
                    // 1034703011 10347030130 10347030122
                    // 点击店铺展示店铺详情
                    // var x = document.getElementById("tip")
                    // x.className = "show";
                    if(that.barIndex1 == 1){
                        var num = 0
                    }else if(that.barIndex2 == 1){
                        var num = 1
                    }else if(that.barIndex3 == 1){
                        var num = 2
                    }else if(that.barIndex4 == 1){
                        var num = 3
                    }else if(that.barIndex5 == 1){
                        var num = 4
                    }else if(that.operateBtn == 1){
                        var num = 5
                    }
                    var fid = event.target.FID
                    that.$api.get('market/store/details?fid=' + fid, {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            that.marketDetail = response.data.data
                            if(that.barIndex1 == 1 || that.barIndex2 == 1 || that.barIndex3 == 1 || that.barIndex4 == 1 || that.barIndex5 == 1 || that.operateBtn == 1){
                                that.$router.push({path: "/exhibition",query: {type: num,name:response.data.data.brand,fid:fid}})
                            }
                        } else {
                            // console.log(response.message);
                            //请求失败，response为失败信息
                        }
                    });

                })


            },
            // 关闭店铺详情展示
            closeDetail(){
                var x = document.getElementById("tip")
                x.className = "hidden";
                this.detailMore = 0
                document.getElementById('topBar').style.display='block'
                document.getElementById('spaceDetail-box').style.position = 'static'
                document.getElementById('spaceDetail-box').style.height = 'auto'
                document.getElementById('spaceDetail-box').style.overflow = 'auto'
            },
            // 展示全部信息
            moreBtn(){
                this.detailMore = 1
                var height = document.documentElement.clientHeight
                if(this.attract != 2){
                    document.getElementById('spaceDetail-box').style.position = 'static'
                    document.getElementById('spaceDetail-box').style.height = height + 'px'
                    document.getElementById('spaceDetail-box').style.overflow = 'auto'
                    document.getElementById('topBar').style.display='none'
                }

            },
            // 模块变色
            searchByParams: function (params) {
                // console.log(params)
                var map = this.isMap
                var searchAnalyser = new fengmap.FMSearchAnalyser(map)
                var searchRequest = new fengmap.FMSearchRequest();
                //配置keyword参数
                if (params.keyword && params.keyword != '') {
                    searchRequest.keyword = params.keyword;
                }

                //配置groupID参数
                if (params.groupID) {
                    searchRequest.groupID = params.groupID
                }

                //配置FID参数
                if (params.FID) {
                    searchRequest.FID = params.FID;
                }
                //配置typeID参数
                if (params.typeID != null) {
                    searchRequest.typeID = params.typeID;
                }

                //配置nodeType参数
                if (params.nodeType != null) {
                    searchRequest.nodeType = params.nodeType;
                }
                //配置楼层参数
                if (params.groupID != null) {
                    searchRequest.groupID = params.groupID;
                }
                if (params.floors != null) {
                    searchRequest.floors = params.floors;
                }
                /**
                 * 根据请求对象查询分析方法
                 * https://www.fengmap.com/docs/js/v2.3.0_beta/fengmap.FMSearchAnalyser.html#query
                 * */
                var sortRes = [];
                searchAnalyser.query(searchRequest, function (result) {
                    sortRes = result;
                    // console.log(result)
                });

                return sortRes;
            },
            findModelByFid: function (list) {
                // console.log(list)
                var map = this.isMap
                var params = {};
                // "1034703011","10347030130","10347030122",
                params.FID = ["1034701014","10347010122"];
                // params.FID = list
                params.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params);
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var model = result[i];
                        var selectedModel = null
                        if (model != null) {
                            //视野中心移动到指定位置,如果不是当前聚焦层，将先设置目标层为聚焦层在跳转
                            // 模块透明
                            // model.target.setColor('rgba(0,0,0.01)', 0.1)
                            // model.target.show = false
                            var coord = {
                                x: model.mapCoord.x,
                                y: model.mapCoord.y,
                                groupID: model.groupID
                            };
                            // map.moveTo(coord);
                            //模型节点对象
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                if (selectedModel && selectedModel.FID != target.FID) {
                                    selectedModel.selected = false;

                                }
                                // model.target.setColor('red')
                                target.selected = true;
                                selectedModel = target;
                            }
                        }
                    }

                }
            },
            findModelByFids: function (list) {
                var map = this.isMap
                var params = {};
                params.FID = ["1034701014","10347010122"];
                // params.FID = list;
                params.nodeType = fengmap.FMNodeType.MODEL;
                // params.typeID = 140300;
                // params.groupID = 2;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params.floors = group;
                var result = this.$options.methods.searchByParams.bind(this)(params);
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var model = result[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                if (selectedModel && selectedModel.FID != target.FID) {
                                    selectedModel.selected = false;
                                }
                                // target.setColorToDefault()
                                target.selected = false;
                                selectedModel = target;
                            }
                        }
                    }

                }
            },
            // 自定义楼层切换组件
            changeViews(domObj) {
                // console.log(domObj.target)
                var map = this.isMap
                var multiFlag = this.multiFlag
                if (multiFlag) {
                    //切换为单楼层展示
                    this.showIndex = 0
                } else {
                    //切换为多楼层展示
                    this.showIndex = 1
                }

                //切换地图单层-false/多层展示-true
                multiFlag = !multiFlag;
                this.multiFlag = multiFlag
                //设置单/多楼层切换
                map.showSingerOrMultiGroup(multiFlag);
            },
            changeFloor(domObj, floorId, index) {
                var defaultIndex = this.defaultIndex;
                // console.log(defaultIndex)
                var defaultFocusID = this.defaultFocusID
                var map = this.isMap
                var multiFlag = this.multiFlag
                if (map) {
                    //设置地图显示楼层
                    if (multiFlag) {
                        //展示全部楼层
                        map.visibleGroupIDs = map.groupIDs;
                    } else {
                        //展示单个楼层
                        map.visibleGroupIDs = [floorId];
                    }
                    //设置地图聚焦楼层
                    map.focusGroupID = floorId;
                    //修改楼层样式
                    //取消选中上一次选中楼层
                    domObj.parentNode.children[defaultIndex].classList.remove('active');
                    domObj.parentNode.children[defaultIndex].classList.add('changeFloor');
                    //选中当前楼层
                    domObj.classList.add('active');

                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    if(this.barIndex2 == 1){
                        this.$options.methods.rentDivide2.bind(this)();
                        this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=0', {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.renta = response.data.data.low
                                this.rentb = response.data.data.middle
                                this.rentc = response.data.data.high
                                this.$options.methods.rentDivide.bind(this)('#FFD7D4','#FF8181','#E61919');

                            } else {

                            }
                        });
                    }else if(this.barIndex1 == 1){
                        this.$options.methods.rentDivide2.bind(this)();
                        this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=2', {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.renta = response.data.data.low
                                this.rentb = response.data.data.middle
                                this.rentc = response.data.data.high
                                this.$options.methods.rentDivide.bind(this)('#C6E4FC','#9CCCFF','#70A4FF');

                            } else {

                            }
                        });
                    }else if(this.barIndex3 == 1){
                        this.$options.methods.rentDivide2.bind(this)();
                        this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=1', {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.renta = response.data.data.low
                                this.rentb = response.data.data.middle
                                this.rentc = response.data.data.high
                                this.$options.methods.rentDivide.bind(this)('#FFE4BA','#FFCB8A','#FF9904');

                            } else {

                            }
                        });
                    }else if(this.barIndex4 == 1){
                        this.$options.methods.rentDivide2.bind(this)();
                        this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=3', {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.renta = response.data.data.low
                                this.rentb = response.data.data.middle
                                this.rentc = response.data.data.high
                                this.$options.methods.rentDivide.bind(this)('#D9DCFF','#BEBBFF','#AA6BFF');

                            } else {

                            }
                        });
                    }else if(this.barIndex5 == 1){
                        this.$options.methods.rentDivide2.bind(this)();
                        this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=4', {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.renta = response.data.data.low
                                this.rentb = response.data.data.middle
                                this.rentc = response.data.data.high
                                this.$options.methods.rentDivide.bind(this)('#D2F7E9','#A5E8CF','#69D0A9');

                            } else {

                            }
                        });
                    }else if(this.operateBtn == 1){
                        this.$options.methods.rentDivide2.bind(this)();
                        this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=5', {}, response => {
                            if (response.status >= 200 && response.status < 300) {
                                this.renta = response.data.data.low
                                this.rentb = response.data.data.middle
                                this.rentc = response.data.data.high
                                this.$options.methods.rentDivide.bind(this)('#FFE4BA','#FFCB8A','#FF9904');

                            } else {

                            }
                        });
                    }

                    //更新选中楼层id及索引
                    this.defaultFocusID = floorId;
                    this.defaultIndex = index;
                }
            },
            // 点击店铺价值
            operateBarbtn(){

                if(this.operateBtn == 0){
                    this.$options.methods.rentDivide2.bind(this)();
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=5', {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.renta = response.data.data.low
                            this.rentb = response.data.data.middle
                            this.rentc = response.data.data.high
                            this.$options.methods.rentDivide.bind(this)('#FFE4BA','#FFCB8A','#FF9904');

                        } else {

                        }
                    });
                    this.barIndex2 = 0
                    this.barIndex3 = 0
                    this.barIndex4 = 0
                    this.barIndex1 = 0
                    this.barIndex5 = 0
                    this.operateBtn = 1
                }else {
                    this.$options.methods.rentDivide2.bind(this)();
                    this.operateBtn = 0
                }
            },
            // 点击品牌价值
            operateBarbtn2(){
                this.barIndex2 = 0
                this.barIndex3 = 0
                this.barIndex4 = 0
                this.barIndex1 = 0
                this.barIndex5 = 0
                this.operateBtn = 0
                // this.$store.routeAction = "push";
                this.$router.push({path: "/brandValue"})
            },
            // 点击调整建议
            operateBarbtn3(){
                this.barIndex2 = 0
                this.barIndex3 = 0
                this.barIndex4 = 0
                this.barIndex1 = 0
                this.barIndex5 = 0
                this.operateBtn = 0
            },
            // 点击坪效
            barBtn1(){
                if(this.barIndex1 == 0){
                    this.$options.methods.rentDivide2.bind(this)();
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=2', {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.renta = response.data.data.low
                            this.rentb = response.data.data.middle
                            this.rentc = response.data.data.high
                            this.$options.methods.rentDivide.bind(this)('#C6E4FC','#9CCCFF','#70A4FF');

                        } else {

                        }
                    });
                    this.barIndex2 = 0
                    this.barIndex3 = 0
                    this.barIndex4 = 0
                    this.barIndex5 = 0
                    this.operateBtn = 0
                    this.barIndex1 = 1
                }else {
                    this.$options.methods.rentDivide2.bind(this)();
                    this.barIndex1 = 0
                }
            },
            // 点击客流
            barBtn2(){
                if(this.barIndex2 == 0){
                    this.$options.methods.rentDivide2.bind(this)();
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=0', {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.renta = response.data.data.low
                            this.rentb = response.data.data.middle
                            this.rentc = response.data.data.high
                            this.$options.methods.rentDivide.bind(this)('#FFD7D4','#FF8181','#E61919');

                        } else {

                        }
                    });
                    this.barIndex1 = 0
                    this.barIndex3 = 0
                    this.barIndex4 = 0
                    this.barIndex5 = 0
                    this.operateBtn = 0
                    this.barIndex2 = 1
                }else {
                    this.$options.methods.rentDivide2.bind(this)();
                    this.barIndex2 = 0
                }
            },
            // 点击销售额
            barBtn3(){
                if(this.barIndex3 == 0){
                    this.$options.methods.rentDivide2.bind(this)();
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=1', {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.renta = response.data.data.low
                            this.rentb = response.data.data.middle
                            this.rentc = response.data.data.high
                            this.$options.methods.rentDivide.bind(this)('#FFE4BA','#FFCB8A','#FF9904');

                        } else {

                        }
                    });
                    this.barIndex2 = 0
                    this.barIndex1 = 0
                    this.barIndex4 = 0
                    this.barIndex5 = 0
                    this.operateBtn = 0
                    this.barIndex3 = 1
                }else {
                    this.$options.methods.rentDivide2.bind(this)();
                    this.barIndex3 = 0
                }
            },
            // 点击集客力
            barBtn4(){
                if(this.barIndex4 == 0){
                    this.$options.methods.rentDivide2.bind(this)();
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=3', {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.renta = response.data.data.low
                            this.rentb = response.data.data.middle
                            this.rentc = response.data.data.high
                            this.$options.methods.rentDivide.bind(this)('#D9DCFF','#BEBBFF','#AA6BFF');

                        } else {

                        }
                    });
                    this.barIndex2 = 0
                    this.barIndex3 = 0
                    this.barIndex1 = 0
                    this.barIndex5 = 0
                    this.operateBtn = 0
                    this.barIndex4 = 1
                }else {
                    this.$options.methods.rentDivide2.bind(this)();
                    this.barIndex4 = 0
                }
            },
            // 点击转化率
            barBtn5(){
                if(this.barIndex5 == 0){
                    this.$options.methods.rentDivide2.bind(this)();
                    var map = this.isMap
                    var group = (map.getFMGroup(map.focusGroupID)).groupID;
                    this.$api.get('/market/map/totalData?floor=' + group+'&time=-1&type=4', {}, response => {
                        if (response.status >= 200 && response.status < 300) {
                            this.renta = response.data.data.low
                            this.rentb = response.data.data.middle
                            this.rentc = response.data.data.high
                            this.$options.methods.rentDivide.bind(this)('#D2F7E9','#A5E8CF','#69D0A9');

                        } else {

                        }
                    });
                    this.barIndex2 = 0
                    this.barIndex3 = 0
                    this.barIndex4 = 0
                    this.barIndex1 = 0
                    this.operateBtn = 0
                    this.barIndex5 = 1
                }else {
                    this.$options.methods.rentDivide2.bind(this)();
                    this.barIndex5 = 0
                }
            },
            // 查看KPI概览
            goKpi(){
                this.$router.push({path: "/kpi"})
            },
            // 色块划分
            rentDivide(color1,color2,color3){
                var map = this.isMap
                var params1 = {};
                params1.FID = this.renta
                params1.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params1.floors = group;
                var result1 = this.$options.methods.searchByParams.bind(this)(params1);
                if (result1.length > 0) {
                    for (var i = 0; i < result1.length; i++) {
                        var model = result1[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                model.target.setColor(color1)
                                // target.setColorToDefault()
                            }
                        }
                    }

                }
                var params2 = {};
                params2.FID = this.rentb
                params2.nodeType = fengmap.FMNodeType.MODEL;
                // var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params2.floors = group;
                var result2 = this.$options.methods.searchByParams.bind(this)(params2);
                if (result2.length > 0) {
                    for (var i = 0; i < result2.length; i++) {
                        var model = result2[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                model.target.setColor(color2)
                                // target.setColorToDefault()
                            }
                        }
                    }

                }
                var params3 = {};
                params3.FID = this.rentc
                params3.nodeType = fengmap.FMNodeType.MODEL;
                // var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params3.floors = group;
                var result3 = this.$options.methods.searchByParams.bind(this)(params3);
                if (result3.length > 0) {
                    for (var i = 0; i < result3.length; i++) {
                        var model = result3[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                model.target.setColor(color3)
                                // target.setColorToDefault()
                            }
                        }
                    }

                }
            },
            rentDivide2(){
                var map = this.isMap
                var params1 = {};
                params1.FID = this.renta
                params1.nodeType = fengmap.FMNodeType.MODEL;
                var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params1.floors = group;
                var result1 = this.$options.methods.searchByParams.bind(this)(params1);
                if (result1.length > 0) {
                    for (var i = 0; i < result1.length; i++) {
                        var model = result1[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                // model.target.setColor('#72DEB4')
                                target.setColorToDefault()
                            }
                        }
                    }

                }
                var params2 = {};
                params2.FID = this.rentb
                params2.nodeType = fengmap.FMNodeType.MODEL;
                // var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params2.floors = group;
                var result2 = this.$options.methods.searchByParams.bind(this)(params2);
                if (result2.length > 0) {
                    for (var i = 0; i < result2.length; i++) {
                        var model = result2[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                // model.target.setColor('#F8CB63')
                                target.setColorToDefault()
                            }
                        }
                    }

                }
                var params3 = {};
                params3.FID = this.rentc
                params3.nodeType = fengmap.FMNodeType.MODEL;
                // var group = (map.getFMGroup(map.focusGroupID)).groupID;
                params3.floors = group;
                var result3 = this.$options.methods.searchByParams.bind(this)(params3);
                if (result3.length > 0) {
                    for (var i = 0; i < result3.length; i++) {
                        var model = result3[i];
                        var selectedModel = null
                        if (model != null) {
                            var target = model.target;
                            //渲染当前设置的模型元素处于高亮状态
                            if (target) {
                                // model.target.setColor('#FF7866')
                                target.setColorToDefault()
                            }
                        }
                    }

                }
            },

            goTop(){
                if(this.showType == 0){
                    this.showType = 1
                    document.getElementById('barShow').style.display='block'
                }else {
                    this.showType = 0
                    document.getElementById('barShow').style.display='none'
                }
            }



        },
        created() {
            window.changeFloor= this.changeFloor
        },
        // beforeRouteLeave(to,from,next){
        //     to.meta.isBack = true;
        //     next()
        // },
        activated() {
            // if(!this.$route.meta.isBack){
            //     this.$router.go(0);
            // }
        }
    }
</script>

<style scoped lang="scss" >
    #fengMap {
        position: absolute;
        width:100%;
        height: 100%;
    }
    p {
        text-align: left;
    }
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: font1 !important;
    }
    /*楼层切换组件样式*/
    /deep/.fm-control-groups{
        width:42px !important;
        height:176px !important;
        border-radius: 42px !important;
        background:#fff !important;
    }
    hr{
        display: none !important;
    }
    /*自定义楼层切换组件*/
    .btnsFloor span{
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        background: url(./images/layer.png) no-repeat center;
        background-size: 80% 80%;
    }
    .btnsFloor{
        width: 40px;
        height: 180px;
        background: #fff;
        position: fixed;
        right: 20px;
        top: 250px;
        border-radius: 22px;
        box-shadow:0px 2px 25px 4px rgba(0,0,0,0.08);
    }
    .btnsFloor span.multi{
        background: url(./images/layers.png) no-repeat center !important;
        background-size: 60% 60%;
        width: 100%;
        height: 40px;
    }
    #floors{
        margin-top: 10px;
        font-family: font2;
    }
    .changeFloor{
        font-size: 12px;
        color: #333333;
        width: 40px;
        height: 40px !important;
        margin: 0 auto;
        line-height: 40px !important;
    }
    .active{
        font-size: 12px;
        color: #255ED7;
        width: 40px;
        height: 40px !important;
        margin: 0 auto;
        line-height: 40px !important;
    }
    /*2D 3D切换*/
    /*2D 3D切换*/
    .fm-control-tool-3d{
        border-radius: 50% !important;
        background-size: 24px auto !important;
        background-position:center !important;
        box-shadow:0px 1px 13px 2px rgba(0,0,0,0.06) !important;
        width: 40px !important;
        height: 40px !important;
    }
    /*店铺详情*/
    #tip{
        visibility: hidden;
        width: 100%;
        background: #fff;
        color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
        border-radius: 10px 10px 0px 0px;
        z-index: 20;
    }
    #tip.show {
        visibility: visible;
        animation: fadein 1s;
    }
    @keyframes fadein {
        from {
            opacity: 0.8;
            bottom: -160px;
        }
        to {
            opacity: 1;
            bottom: 0px;
        }
    }
    /*分割线*/
    .spaceTop-txt{
        font-size: 12px;
        color: #999999;
        margin-top: 14px;
        margin-left: 22px;
    }
    .spaceTxt1{
        font-size: 15px;
        color: #333333;
        margin-top: 14px;
        margin-left: 22px;
    }
    .spaceLine2{
        width: 336px;
        margin: 0 auto 16px auto;
        height: 1px;
        background: #E8E8E8;
    }
    .spaceArchitecture-box{
        margin-top: 12px;
        margin-left: 22px;
        display: flex;
        margin-bottom: 22px;
    }
    .spaceDetail-list{
        font-size: 15px;
        color: #333333;
        margin-left: 22px;
        margin-top: 14px;
    }
    /*KPI概览*/
    .operateKpi{
        position: fixed;
        z-index: 10;
        top: 72px;
        right: 18px;
    }
    /*底栏*/
    .operateBar{
        width:375px;
        height:auto;
        background:rgba(249,249,249,1);
        box-shadow:0px 1px 13px 0px rgba(212,212,212,1);
        border-radius:10px 10px 1px 1px;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
    }
    .operateBar-top{
        /*margin-top: 16px;*/
        /*margin-top: 6px;*/
        display: flex;
        margin-left: 12px;
        margin-bottom: 4px;
    }
    .operateBar-topImg{
        width: 73px;
        height: 76px;
        margin-right: -4px;
    }
    .operateBar-bottom{
        display: flex;
        margin-left: 22px;
        flex-wrap: wrap;
    }
    .operateBar-btn,.operateBar-btn1{
        width: 156px;
        height: 34px;
        background: #ECECEC;
        border-radius: 16px;
        margin-right: 18px;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
    }
    .operateBar-btn2{
        width: 156px;
        height: 34px;
        background:linear-gradient(90deg,rgba(52,158,250,1) 0%,rgba(13,115,213,1) 100%);
        box-shadow:0px 4px 6px 0px rgba(184,184,184,0.5);
        border-radius: 16px;
        margin-right: 18px;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
    }
    .operateBar-btnImg{
        width: 14px;
        height: 14px;
        margin-left: 20px;
    }
    .operateBar-btnTxt{
        margin-left: 8px;
        flex: 1;
        font-size: 14px;
        color: #333333;
    }
    .operateBar-btnImg2{
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }
    .operateBar-btn:active{
        background: #fff;
    }
    /*色块划分展示*/
    .rentColor{
        position: fixed;
        top: 70px;
        z-index: 10;
        left: 26px;
    }


</style>
